<template>
  <div class="container">
    <div class="statement_container">
      <div class="search">
        <div class="item">
          <div class="label">单号：</div>
          <el-input
            v-model="statementForm.orderNo"
            style="width: 193px;"
            size="small"
            placeholder="请输入单号"
            @input="getList()"
          ></el-input>
        </div>
        <!-- <div class="item">
          <div class="label">客户名：</div>
          <el-input
            v-model="statementForm.agentName"
            style="width: 193px;"
            size="small"
            placeholder="请输入客户名"
            @input="getList()"
          ></el-input>
        </div>
        <div class="item">
          <div class="label">分享人：</div>
          <el-input
            v-model="statementForm.companyName"
            style="width: 193px;"
            size="small"
            placeholder="请输入分享人"
            @input="getList()"
          ></el-input>
        </div> -->
        <div class="item">
          <div class="label">日期：</div>
          <el-date-picker
            v-model="statementForm.time"
            type="daterange"
            placeholder="选择日期"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="getList()"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            size="small"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="table_container">
        <el-table :data="tableList" border max-height="550">
          <el-table-column
            prop="orderNo"
            label="单号"
            align="center"
            width="280"
          >
          </el-table-column>
          <el-table-column
            prop="userName"
            label="用户名"
            align="center"
          ></el-table-column>
          <el-table-column prop="shareName" label="分享人" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.shareName || "--" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="orderTotal" label="原订单金额" align="center">
            <template slot-scope="scope">
              <span style="color: orange;">{{ scope.row.orderTotal }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="discountTotal" label="优惠金额" align="center">
            <template slot-scope="scope">
              <span style="color: green;">{{ scope.row.discountTotal }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="total" label="实付金额" align="center">
            <template slot-scope="scope">
              <span style="color: red;">{{ scope.row.total }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="commission" label="佣金" align="center">
          </el-table-column>
          <el-table-column prop="payTime" label="支付时间" align="center">
          </el-table-column>
        </el-table>
        <div class="total">
          <div>总订单金额：</div>
          <div style="color: red;">{{ totalAmount }}</div>
          <div style="margin-left: 24px;">总佣金：</div>
          <div style="color: red;">{{ commissionAmount }}</div>
        </div>
        <div style="position: absolute;bottom: 20px;left: 30%;">
          <!-- 分页组件 -->
          <Pagination
            v-bind:child-msg="pageparm"
            @callFather="callFather"
          ></Pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Pagination from "../../components/Pagination";
import { getAgentRecordList } from "../../api/agentRecord";
export default {
  components: {
    Pagination
  },
  data() {
    return {
      statementForm: {
        orderNo: "",
        agentName: "",
        companyName: "",
        time: []
      },
      pageparm: {
        pageIndex: 1,
        pageSize: 10,
        total: 0
      },
      totalAmount: 0,
      commissionAmount: 0,
      companyOptions: [],
      tableList: []
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //获取流水列表数据
    async getList() {
      let req = {
        pageIndex: this.pageparm.pageIndex,
        pageSize: this.pageparm.pageSize,
        orderNo: this.statementForm.orderNo,
        agentName: this.statementForm.agentName,
        companyName: this.statementForm.companyName,
        startTime: this.statementForm.time ? this.statementForm.time[0] : "",
        endTime: this.statementForm.time ? this.statementForm.time[1] : ""
      };
      const res = await getAgentRecordList(req);
      if (res.code == 200 && res.data) {
        this.tableList = res.data.items;
        this.pageparm.total = res.data.totalCount;
        this.totalAmount = res.data.totalAmount;
        this.commissionAmount = res.data.commissionAmount;
      } else {
        this.tableList = [];
      }
    },

    //分页
    callFather(parm) {
      this.pageparm.pageIndex = parm.pageIndex;
      this.pageparm.pageSize = parm.size;
      this.getList();
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  .statement_container {
    width: 100%;
    .search {
      width: 100%;
      height: 100px;
      background-color: #fff;
      display: flex;
      align-items: center;
      border: 1px solid rgb(204, 204, 204);
      border-radius: 4px;
      margin-top: 10px;
      padding-left: 27px;
      box-sizing: border-box;
      .item {
        display: flex;
        align-items: center;
        margin-left: 30px;
        .label {
          color: rgb(92, 92, 92);
          font-family: 思源黑体;
          font-size: 16px;
          font-weight: 700;
        }
      }
    }
    .table_container {
      width: 100%;
      height: 75vh;
      background: rgb(255, 255, 255);
      border: 1px solid rgb(204, 204, 204);
      border-radius: 4px;
      margin-top: 16px;
      padding: 22px;
      box-sizing: border-box;
      position: relative;
      .total {
        width: 100%;
        position: absolute;
        bottom: 80px;
        right: 20px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        color: rgb(143, 135, 135);
        font-family: 思源黑体;
        font-size: 12px;
        font-weight: 400;
      }
    }
  }
}
</style>
